<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UEditor Plus演示</title>
    <link rel="stylesheet" href="./style.css"/>
    <script src="./../third-party/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $(document).on('click', '[target="editor_iframe"]', function () {
                $('[data-github-source]').attr('href', 'https://github.com/modstart-lib/ueditor-plus/blob/master/_examples/' + $(this).attr('href'));
                $('[data-gitee-source]').attr('href', 'https://gitee.com/modstart-lib/ueditor-plus/blob/master/_examples/' + $(this).attr('href'));
            });
        });
    </script>
    <script>var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?f84f35a44b5cc5c0b10c3fabdf0f322b";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>
</head>
<body>
<div class="demo-header">
    <div class="link">
        <a data-github-source
           href="https://github.com/modstart-lib/ueditor-plus/blob/master/_examples/completeDemo.html" target="_blank">Github源码</a>
        <a data-gitee-source href="https://gitee.com/modstart-lib/ueditor-plus/blob/master/_examples/completeDemo.html"
           target="_blank">Gitee源码</a>
    </div>
    <h1>UEditor Plus 功能演示</h1>
</div>
<div class="demo-menu">
    <h3>基础示例</h3>
    <ul>
        <li>
            <a href="completeDemo.html" target="editor_iframe">完整示例</a><br/>
            编辑器的完整功能
        </li>
        <li>
            <a href="simpleDemo.html" target="editor_iframe">简单示例</a><br/>
            使用基础的按钮实现简单的功能
        </li>
    </ul>
    <h3>应用展示</h3>
    <ul>
        <li>
            <a href="submitFormDemo.html" target="editor_iframe">表单应用</a><br/>
            编辑器的内容通过表单提交到后台
        </li>
        <li>
            <a href="resetDemo.html" target="editor_iframe">重置编辑器</a><br/>
            将编辑器的内部变量清空，重置。
        </li>
        <li>
            <a href="textareaDemo.html" target="editor_iframe">文本域渲染编辑器</a><br/>
            将编辑器渲染到文本域，并且将文本域的内容放到编辑器的初始化内容里
        </li>
    </ul>
    <h3>二次开发</h3>
    <ul>
        <li>
            <a style="color:red;" href="customizeToolbarUIDemo.html" target="editor_iframe">二次开发例子</a><br/>
            添加自定义的普通按钮、下拉菜单按钮、对话框按钮
        </li>
        <li>
            <a href="customToolbarDemo.html" target="editor_iframe">自定义Toolbar</a><br/>
            用自己的皮肤，设计自己的编辑器
        </li>
        <li>
            <a href="customPluginDemo.html" target="editor_iframe">自定义插件</a><br/>
            在编辑器的基础上开发自己的插件
        </li>
    </ul>
    <h3>高级案例</h3>
    <ul>
        <li>
            <a href="sortableDemo.html" target="editor_iframe">表格排序示例</a><br/>
            编辑表格,并设置排序后可在展示区域点击排序
        </li>
        <li>
            <a href="sectionDemo.html" target="editor_iframe">目录大纲示例</a><br/>
            获取编辑内容的目录大纲，并通过操作目录，更新编辑器内容
        </li>
        <li>
            <a href="multiDemo.html" target="editor_iframe">多编辑器实例</a><br/>
            一个页面实例化多个编辑器，互不影响
        </li>
        <li>
            <a href="renderInTable.html" target="editor_iframe">在表格中渲染编辑器</a><br/>
            表格中渲染编辑器
        </li>
        <li>
            <a href="jqueryCompleteDemo.html" target="editor_iframe">jquery</a><br/>
            jquery中使用编辑器
        </li>
        <li>
            <a href="jqueryValidation.html" target="editor_iframe">jqueryValidation</a><br/>
            编辑器在jqueryValidation中验证
        </li>
        <li>
            <a href="uparsedemo.html" target="editor_iframe">展示页面uparse.js解析</a><br/>
            通过调用uparse.js在展示页面中自动解析编辑内容
        </li>
        <li>
            <a href="filterRuleDemo.html" target="editor_iframe">过滤规则定制化</a><br/>
            通过配置filterRules可以定制黑白名单，过滤和转换你要的标签和属性
        </li>
        <li>
            <a href="setWidthHeightDemo.html" target="editor_iframe">设置宽高</a><br/>
            设置宽高的demo页面
        </li>
        <li>
            <a href="multiEditorWithOneInstance.html" target="editor_iframe">多编辑共用实例</a><br/>
            多个编辑区使用同一个编辑器实例
        </li>
    </ul>
</div>
<div class="demo-iframe">
    <div class="demo-iframe-container">
        <iframe name="editor_iframe" src="./completeDemo.html"></iframe>
    </div>
</div>
</body>
</html>
